<template>
  <div class="home">
    <!-- 分片区域 -->
    {{ burstObj.burst.length }}
    <div class="burst">
      <div class="card" v-for="(burst, i) in burstObj.burst" :key="burst.hash">

        <div class="">片段 {{ i }}</div>
        <div class="">大小： {{ burst.blob.size / 1024 }} kb</div>
        <div class="">上传进度：{{burst.press}}%</div>
        <!-- <div class="hash">hash: {{ burst.hash }}</div> -->
        <!-- <div class="text">text: {{ burst.text }}</div> -->

        <div class="proess" :style="{
          background:`linear-gradient(to right, #3ae2b7 0% ${burst.press}% , transparent ${burst.press}% 100%)`
          }"></div>
      </div>
    </div>

    <input type="file" @change="fileChange" />
  </div>
</template>

<script>
import fileHandler from "../compositions/fileHandler";
export default {
  name: "Home",
  setup() {
    return { ...fileHandler() };
  },
};
</script>

<style scoped>
.burst {
  display: flex;
  flex-wrap: wrap;
}
.card {
  margin: 10px;
  width: 200px;
  box-shadow: gray 0 0 5px 1px;
  word-break: break-all;
  padding: 10px;
  border-radius: 5px;
}
.proess{
  height: 10px;
}
</style>